<template>
	<view style="background-color: #F8F8F8;" class="container">
		<!-- <top-heigth background="#fff"></top-heigth>
		<view class="technician-top">
			<uv-icon name="/static/image/top-address.png" style="margin-right: 10rpx;"></uv-icon>
			<view class="">
				{{location && location.province ? location.province : '定位未开启'}}
			</view>
		</view> -->
		<view class="nav-back">
			<top-heigth></top-heigth>
			<!-- 搜索框 -->
			<view v-cloak id="app" class="search-head">
				<image src="../../static/image/search.png" class="search-icon"></image>
				<input class="uni-input search-inp" confirm-type="search" placeholder="请输入技师姓名" @click="toSearchPage()"/>
				<text class="search-text" @click="toSearchPage()">搜索</text>
			</view>
		
			<view class="order-box">
				<view class="order-tip-city">
					<text class="tip-text" @click="toCityPage()">{{indexFormData.shortName}}</text>
					<image src="/static/image/jian.png" class="tip-icon"></image>
				</view>
				<view class="order-tip-city">
					<text class="tip-text" @click="openSortBox(1)">{{indexFormData.sortOrderName || '综合排序'}}</text>
					<image src="/static/image/jian.png" class="tip-icon"></image>
				</view>
				<view class="order-tip-city">
					<text class="tip-text" @click="openSortBox(2)">{{indexFormData.sortSexName || '性别'}}</text>
					<image src="/static/image/jian.png" class="tip-icon"></image>
				</view>
				<!-- <uv-drop-down
					ref="dropDown"
					sign="dropDown_1" 
					text-active-color="#999999"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'11rpx'}" 
					:extra-active-icon="{name:'arrow-up-fill',color:'#999999',size:'11rpx'}"
					:defaultValue="defaultValue" 
					class="uv-drop-down"
					@click="selectMenu"
				>
					<uv-drop-down-item 
					class="uv-drop-down-item"
						name="order" 
						type="2" 
						:label="dropItem('order').label" 
						:value="dropItem('order').value">
					</uv-drop-down-item>
					<uv-drop-down-item 
						name="type" 
						type="2" 
						:label="dropItem('type').label" 
						:value="dropItem('type').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<view  @touchmove.stop.prevent catchtouchmove="true">
					<uv-drop-down-popup
						ref="myPopup"
						sign="dropDown_1" 
						:click-overlay-on-close="true"
						:currentDropItem="currentDropItem" 
						@clickItem="clickItem"
						@popupChange="change"
						@touchmove.stop.prevent
						catchtouchmove="true"
					></uv-drop-down-popup>
				</view> -->
				<view class="order-tip" @click="openSortBox(3)">
					<text class="tip-text" style="width: auto">筛选</text>
					<image src="/static/image/oder.png" class="tip-icon"></image>
				</view>
				<view class="pop-content" style="display: block;" v-if="showPopup" @touchmove.stop.prevent catchtouchmove="true">
					<view class="popup-container">
						<view class="popup-box" v-if="sortType == 1">
							<view 
								class="order-list"
								v-for="(item, index) in sortOrderList"  
								:key="index"
								@click="changeOrder(item, 1)"
								:class="item.value == indexFormData.sortOrderType ? 'active' : ''"
							>{{item.label}}</view>
						</view>
						<view class="popup-box" v-if="sortType == 2">
							<view 
								class="order-list"
								v-for="(item, index) in sortSexList"  
								:key="index"
								@click="changeOrder(item, 2)"
								:class="item.value == indexFormData.staffSex ? 'active' : ''"
							>{{item.label}}</view>
						</view>
						<view class="popup-box" v-if="sortType == 3">
							<view class="pop-head">
								<text class="pop-jl">技师距离(KM)</text>
								<text>{{popFormData.distanceCondition}}</text>
							</view>
							<uv-slider v-model="popFormData.distanceCondition" step="1" min="0" max="30" block-size="15" 
								block-color="#27A0FF" 
								class="slide_view"
								backgroundColor="#cccccc" 
								activeColor="#27A0FF" @input="sliderChanging"></uv-slider>
							<view class="pop-head">
								<text class="pop-jl">技师性别</text>
							</view>
									<!-- 单选 -->
							<view class="radio-tob">
								<view class="tag-item" :class="item.value == popFormData.staffSex ? 'active' : ''" v-for="(item, index) in radios" :key="index" @click="radioClick(item.value)">
									<text class="tag-item-text">{{item.label}}</text>
								</view>
							</view>
							<!-- 开通城市 -->
							<view class="pop-head">
								<text class="pop-jl">开通城市</text>
							</view>
							<scroll-view scroll-y="true" >
							<view class='new_city_box'>
								<view class="tag-item" :class="item.id == popFormData.cityId ? 'active' : ''" v-for="(item, index) in openCityList" :key="index"  @click='cityTap(index)'>
									<text class="tag-item-text">{{item.shortName}}</text>
								</view>
							</view>
							</scroll-view>
							<view class="login-but" @click="loginInto">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <uv-popup ref="popup" @change="change"> -->
			
			
				
			<!-- </uv-popup> -->
		</view>	
		<view class="body">
		<view class="content-box">
			<view style="margin-bottom: 24rpx;"></view>
			
			<view class="list-box" v-for="(item,index) in list" @click="goDetail(item.id)">
				<view class="">
					<!-- 0 新人 1优秀 -->
					<uv-icon v-if="item.isRecommend == 0" size="22" name="/static/image/t-vip2.png" class="m-b8 t-vip"></uv-icon>
					<uv-icon v-if="item.isRecommend == 1" size="22" name="/static/image/t-vip1.png" class="m-b8 t-vip"></uv-icon>
					<view class="list-head">
						<view class="img-box">
							<image class="image" :src="item.staffCover" mode="widthFix"></image>
						</view>
						<view v-if="item.isRecommend == 0" class="title title-blue">新人</view>
						<view v-if="item.isRecommend == 1" class="title">优秀技师</view>
					</view>
				</view>
				<view style="width:calc(100% - 184rpx)">
					<view class="list-center-top">
						<view class="list-center">
							<h1 class="list-center-h1">{{item.staffName}} <span v-if="isShenhe" style="color: brown;">（已实名）</span></h1>
							<view class="time">
								<view class="time-b-red">最早可约</view>
								<view class="time-f-red">{{item.timeWork}}</view>
							</view>
						</view>
						
						<view>
							<view v-if="item.isCollect == 0" @click.stop="startBox(item.id, item.isCollect)" class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/start.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">收藏</view>
							</view>
							<view v-if="item.isCollect == 1" @click.stop="startBox(item.id, item.isCollect,item.tAppUserCollectVo.id,item.tAppUserCollectVo.version)" class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/start-choose.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">收藏</view>
							</view>
							<view class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/t-address.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">{{item.distance}}km</view>
							</view>
						</view>
					</view>
					
					<view class="list-bottom-box">
						<view class="list-bottom">
							<view class="font" style="margin-bottom: 8rpx;">
								<span class="list-span">{{item.score}}分</span>服务单数 {{item.orderCount}}
							</view>
							<view @click.stop="goBusinessDetail(detail.tAppSupplierVo.id)" class="font font-flex">
								<uv-icon size="16" name="/static/image/t-shop.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">{{item.tAppSupplierVo ? item.tAppSupplierVo.supplierName : '无'}}</view>
							</view>
						</view>
						<view class="but-blue t-but">立即预约</view>
					</view>
				</view>
			</view>	
		</view>
		</view>
	</view>
</template>

<script>
	
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	export default {
		data() {
			return {
				isShenhe: 1,
				sortType: 1, //筛选类型1综合排序，2性别，3筛选
				list:[],
				value: 30,
				location: '',
				isTo:1,//1刷新
				userInfo: {},
				distanceAsc:null,//距离排序 1正序 0倒序 int
				distanceCondition:30,//最远距离 str
				ctimeAsc:null,//注册时间排序 1正序 0倒序 int
				staffSex:2,//性别 0 1 2  int
				staffName:"",//技师名称 str
				//开通城市
				openCityList: [],
				cityId:"",//市ID int
				cityName:'',
				serverAsc:null,//服务时间 1正 0倒 int 
				orderAsc:null,//订单排序 1正 0倒 int
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all'],
				// 筛选结果
				result: [{ name: 'order', label: '综合排序', value: '1' }],
				activeName: 'order',
				sortOrderList: [
				{
					label: '综合排序',
					value: '1'
				},{
					label: '按距离排序',
					value: '2'
				}, {
					label: '可服务时间',
					value: '3'
				}, {
					label: '单量排序',
					value: '4'
				}, {
					label: '注册时间',
					value: '5'
				}],
				sortSexList: [{
					label: '不限',
					value: '2'
				}, {
					label: '男',
					value: '1'
				}, {
					label: '女',
					value: '0'
				}],
				order: {
					label: '综合排序',
					value: '0',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [
						{
							label: '综合排序',
							value: '1'
						},{
						label: '按距离排序',
						value: '2'
					}, {
						label: '可服务时间',
						value: '3'
					}, {
						label: '单量排序',
						value: '4'
					}, {
						label: '注册时间',
						value: '5'
					}]
				},
				type: {
					label: '性别',
					value: '2',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [{
						label: '不限',
						value: '2'
					}, {
						label: '男',
						value: '1'
					}, {
						label: '女',
						value: '0'
					}]
				},
				radios: [{
					checked: true,
					label: '不限',
					value: '2'
				},
				{
					checked: false,
					label: '男',
					value: '1'
				},
				{
					checked: false,
					label: '女',
					value: '0'
				}],
				indexFormData: {
					distanceAsc: null,
					ctimeAsc: null,
					serverAsc: null,
					orderAsc: null,
					distanceCondition: 30,
					staffSex: 2,
					lat: null,
					lng: null,
					cityId: '',
					shortName: '',
					sortOrderName: '',
					sortSexName: ''
				}, //外层参数
				popFormData: {
					distanceCondition: 30,
					staffSex: 2,
					lat: '',
					lng: '',
					cityId: '',
					shortName: '',
				}, //内层参数
				showPopup: false,
			}
		
		},
		components: { TopHeigth },
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		onLoad() {
			this.location = uni.getStorageSync('location');
			this.userInfo = uni.getStorageSync('userInfo');
			this.cityName = uni.getStorageSync("cityName") ? uni.getStorageSync("cityName") : '北京';
			this.indexFormData.lat = this.location ? this.location.latitude : null;
			this.indexFormData.lng = this.location ? this.location.longitude : null;
			this.indexFormData.cityId = this.location ? this.location.cityId : '';
			this.indexFormData.shortName = this.location ? this.location.province : '北京';
			
			uni.$on('selectCityData', (res) => {
				console.log('1111111111',res.id)
				this.indexFormData.lat = res.lat;
				this.indexFormData.lng = res.lng;
				this.indexFormData.cityId = res.id;
				this.indexFormData.shortName = res.shortName;
				this.listBox();
			});
			
			
		},
		onShow() {
			if(this.isTo==1){
				this.listBox();
			}
			this.queryHotAndOpen();
		},
		onUnload() {  
		  // 移除监听事件  
			uni.$off('selectCityData');  
		},
		methods: {
			startBox(id,type,listId,version){
				checkLogin(() => {
					if(type == 0){ // 收藏
						console.log("收藏")
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/insertTAppUserCollect',{
							appUserId:this.userInfo.id,
							collectType:1, //1技师 2服务
							staffId:id,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								console.log("chengg")
								this.listBox()
							}
						})
					} else{ //取消收藏
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
							id:listId,
							version:version,
							isOn:1,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								this.listBox()
							}
						})
					} 
					
				})
			},
			queryHotAndOpen(){
				uni.$u.http.get('/api/shop/v1_0/tAppStaffRCA/queryHotAndOpen',{}).then((res) => {
					this.openCityList = res.data.oepn;
					// return res.data.hot;
				})
			},
			openSortBox(type){
				this.sortType = type;
				// this.$refs.myPopup.close();
				// this.$refs.popup.open('top');
				this.showPopup = !this.showPopup;
				this.popFormData = JSON.parse(JSON.stringify(this.indexFormData));
			},
			deleteBox(listId){
				checkLogin(() => {
					
				})
			},
			//热门城市点击
			cityTap(index) {
				var data = this.openCityList[index]
				this.popFormData.lat = data.lat;
				this.popFormData.lng = data.lng;
				this.popFormData.cityId = data.id;
				this.popFormData.shortName = data.shortName;
				
				this.cityId = data.id
				uni.setStorageSync("cityName",data.shortName)
				
			},
			radioClick(val) {
				console.log('staffSex', val)
				this.popFormData.staffSex = val;			
			},
			sliderChanging(value){
				console.log("value",value)
				this.distanceCondition = value;
				this.popFormData.distanceCondition = value;
			},
			loginInto(){
				if(!this.popFormData.shortName){
					this.popFormData.shortName = this.indexFormData.shortName;
					this.popFormData.lat = this.indexFormData.lat;
					this.popFormData.lng = this.indexFormData.lng;
				}
				
				this.indexFormData = Object.assign(this.indexFormData, this.popFormData);
				if(this.indexFormData.staffSex==0){
					this.indexFormData.sortSexName = "女";
					this.type.value = "0";
				}else if(this.indexFormData.staffSex==1){
					this.indexFormData.sortSexName = "男";
					this.type.value = "1";
				}else if(this.indexFormData.staffSex==2){
					this.indexFormData.sortSexName = "不限";
					this.type.value = "2";
				}
				this.activeName = 'type';
				this.showPopup = false;
				this.listBox();
			},
			listBox(){
				uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
					this.isShenhe = !res.data
					this.isTo = 1;
					console.log('2222222222',this.indexFormData.cityId)
					uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/queryStaffByCondition',{
						id: this.isShenhe ? 1 : null,
						isAuthentication:1,
						isOn:1,
						checkStatus:1,
						lat: this.indexFormData.lat || null,
						lng: this.indexFormData.lng || null,
						cityId: this.indexFormData.cityId,
						distanceCondition: this.indexFormData.distanceCondition,
						staffSex: this.indexFormData.staffSex,
						distanceAsc: this.distanceAsc,
						ctimeAsc:this.ctimeAsc,
						staffName:this.staffName,
						serverAsc:this.serverAsc,
						orderAsc:this.orderAsc,
						withStartTime: true
					}).then((res) => {
						this.list = res.aaData
					})
				})
				
			},
			//去确认订单
			goOrder(id){
				uni.navigateTo({
					url:"/pages/order/confirmOrder?id="+ id
				})
			},
			goDetail(id){
				uni.navigateTo({
					url: "/pages/technician/detail?id="+id
				})
			},
			toSearchPage(){//去搜索
				uni.navigateTo({
					url: "/pages/searchTech/index"
				})
			},
			toCityPage(){//城市
				this.showPopup = false;
				// this.$refs.myPopup.close();
				this.isTo = 2;
				uni.navigateTo({
					url: "/pages/cityChoose/city"
				})
			},
			changeOrder(item, type){
				if(type == 1){
					this.indexFormData.sortOrderType = item.value;
					this.indexFormData.sortOrderName = item.label;
					if(item.value==1){
						this.distanceAsc=null,
						this.ctimeAsc = null,
						this.serverAsc = null,
						this.orderAsc = null
					}
					if(item.value==2){
						this.distanceAsc= 1,
						this.ctimeAsc = null,
						this.serverAsc = null,
						this.orderAsc = null
					}
					if(item.value==3){
						this.distanceAsc= null,
						this.ctimeAsc = null,
						this.serverAsc = 1,
						this.orderAsc = null
					}
					if(item.value==4){
						this.distanceAsc= null,
						this.ctimeAsc = null,
						this.serverAsc = null,
						this.orderAsc = 1
					}
					if(item.value==5){
						this.distanceAsc= null,
						this.ctimeAsc = 1,
						this.serverAsc = null,
						this.orderAsc = null
					}
				}else if(type == 2){
					this.indexFormData.staffSex = item.value;
					this.indexFormData.sortSexName = item.label;
				}
				this.indexFormData.distanceAsc = this.distanceAsc;
				this.indexFormData.ctimeAsc = this.ctimeAsc;
				this.indexFormData.serverAsc = this.serverAsc;
				this.indexFormData.orderAsc = this.orderAsc;
				this.showPopup = false;
				this.listBox()
			},
			change(e) {
				this.showPopup = false;
				console.log('弹窗打开状态：',e);
			},
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				const find = this.result.find(item => item.name == this.activeName);
				console.log('this.result',this.result)
				console.log('find',find)
				if (find) {
					const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
					this[this.activeName].activeIndex = findIndex;
				} else {
					this[this.activeName].activeIndex = 0;
				}
			},
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				console.log('result：',this.result);
					this.result.forEach((item,index)=>{    //js遍历数组
					console.log('item：',item);
						if(item.name=="type"){
							this.staffSex = item.value
						}
						if(item.name=="order"){
							if(item.value==1){
								this.distanceAsc=null,
								this.ctimeAsc = null,
								this.serverAsc = null,
								this.orderAsc = null
							}
							if(item.value==2){
								this.distanceAsc= 1,
								this.ctimeAsc = null,
								this.serverAsc = null,
								this.orderAsc = null
							}
							if(item.value==3){
								this.distanceAsc= null,
								this.ctimeAsc = null,
								this.serverAsc = 1,
								this.orderAsc = null
							}
							if(item.value==4){
								this.distanceAsc= null,
								this.ctimeAsc = null,
								this.serverAsc = null,
								this.orderAsc = 1
							}
							if(item.value==5){
								this.distanceAsc= null,
								this.ctimeAsc = 1,
								this.serverAsc = null,
								this.orderAsc = null
							}
						}
					});
				this.indexFormData.staffSex = this.staffSex;
				this.indexFormData.distanceAsc = this.distanceAsc;
				this.indexFormData.ctimeAsc = this.ctimeAsc;
				this.indexFormData.serverAsc = this.serverAsc;
				this.indexFormData.orderAsc = this.orderAsc;
				this.listBox()
				// uni.showModal({
				// 	content: `筛选的值：${JSON.stringify(this.result)}`
				// })
			}
		}
	}
</script>

<style lang="scss">
		page {
			display: -webkit-box;
			width: 100%;
			height: 100%;
		}

@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}
.search-icon{
	width: 17px;
	height: 17px;
	position: absolute;
	top: 20px;
	left: 30px;
	
}
.search-head{
	height: 40px;
	position: relative;
	padding: 10px 20px;
	display: flex;
}
.hotCityTips {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #999999;
	}
.search-inp{
	height: 36px;
	background: #FFFFFF;
	border-radius: 19px;
	border: 1px solid #F7F7F7;
	padding-left: 30px;
	flex: 1;
}
.search-text{
	font-weight: 500;
	font-size: 15px;
	color: #27A0FF;
	line-height: 40px;
	text-align: right;
	font-style: normal;
	width: 45px;
}
.popup-box{
	padding: 0 20px;
	padding-bottom: 20px;
	background: #fff;
	z-index: 999999;
	position: fixed;
	width: 93%;
}
.order-list{
	line-height: 40px;
}
.order-list.active{
	color: #2878ff;
}
.pop-head{
	padding-top: 21px;
	margin-bottom: 12px;
	display: flex;
	font-weight: 400;
	font-size: 14px;
	color: #666666;
	line-height: 20px;
	text-align: left;
	font-style: normal;
}
/deep/uni-slider{
	margin: 0 9px;
	margin-top: 20px 
}
.uv-nav-slot {
	@include flex;
	align-items: center;
	justify-content: space-between;
	border-width: 0.5px;
	border-radius: 100px;
	border-color: #dadbde;
	padding: 3px 7px;
	opacity: 0.8;
}

.technician-top{
	@include flex;
	align-items: center;
	justify-content: flex-start;
	padding:32rpx;
	background-color: #fff;
}



.list-box{
	position: relative;
	border-radius:24rpx;
	padding: 32rpx 24rpx;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 24rpx;
	background-color: #fff;
	margin-bottom:24rpx;
	
}
.list-head{
	height:160rpx;
	width: 160rpx;
	background: #f8f8f8;
	margin-right: 24rpx;
	border-radius: 160rpx;
	position: relative;
	font-weight: bold;
	.img-box{
		height:160rpx;
		width: 160rpx;
		border-radius: 160rpx;
		overflow: hidden;
		image{
			width: 160rpx;
			height: 160rpx;
		}
	}
	
	.title{
		position: absolute;
		bottom:-8rpx;
		left: 80rpx;
		width: 104rpx;
		margin-left: -51rpx;
		height: 32rpx;
		color: #75391E;
		font-size: 20rpx;
		border-radius: 32rpx;
		padding: 2rpx 6rpx;
		text-align: center;
		background: linear-gradient(180deg, #FFF0D2 0%, #FFC874 100%);
	}
	.title-blue{
		color: #1665AA;
		background: linear-gradient(180deg, #BEF4FF 0%, #30D2FF 100%);
	}
}
.t-vip{
		position: absolute;
		top: 22rpx;
	}

.list-center{
	/* width: calc(100% - 344rpx); */
	margin-right: 24rpx;
	h1{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	.time{
		display: flex;
		justify-content: flex-start;
		font-size: 22rpx;
		margin-bottom: 8rpx;
		.time-b-red{
			height: 34rpx;
			line-height: 34rpx;
			color: #fff;
			background: #01B88C;
			border-radius: 4rpx;
			border: 2rpx solid #01B88C;
			z-index: 9;
			padding: 0 8rpx;
		}
		.time-f-red{
			height: 34rpx;
			line-height: 34rpx;
			color: #01B88C;
			background: none;
			border: 2rpx solid #01B88C;
			border-left: 0;
			border-radius: 0 4rpx 4rpx 0;
			margin-left: -2rpx;
			padding: 0 8rpx;
		}
	}
	
	
}
.list-bottom-box{
	display: flex;
	justify-content: space-between;
}
.list-bottom{
	width: calc(100% - 200rpx);
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.font-flex{
		display: flex;
		justify-content: flex-start;
		.shop{
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
}
.list-center-top{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.slide_view{
	width: 90%;
}

.icon-font{
	display: flex;
	justify-content: flex-end;
	color: #999999;
	font-size: 24rpx;
}
/deep/.uv-drop-down{
	background-color: transparent !important;
	border-bottom: none !important;
}
/deep/.uv-icon__icon{
	margin-top: 4px;
}
/deep/.uv-dp__container{
	margin-top: -4px;
}
.order-box{
	display: flex;
	height: 40px;
	position: relative;
}
.uv-sticky{
	flex: 1;
}
.order-tip{
	width: 70px;
	text-align: right;
	padding-right: 20px;
	line-height: 38px;
	flex: 1;
}
.order-tip-city{
	text-align: left;
	margin-left: 15px;
	line-height: 38px;
}
.tip-icon{
	width: 17px;
	height: 17px;
	vertical-align: middle;
}
.tip-text{
	font-weight: 400;
	font-size: 15px;
	color: #999999;
	line-height: 20px;
	text-align: left;
	font-style: normal;
	padding-right: 5px;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 80px;
	display: inline-block;
}
.pop-jl{
	width: 85%;
	font-size: 14px;
	color: #333333;
	line-height: 20px;
	text-align: left;
	font-style: normal;
}
.u-page__tag-item {
		margin-right: 20px;
		width: 33%;
	
	}
.radio-tob{
	position: relative;
	display: flex;
}
	.new_city_box {
		flex-wrap: wrap;
		position: relative;
		display: flex;
		 max-height: 165px;
	}
 
	.new_city_text {
		width: 114rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #333;
		background: #fff;
		border-radius: 21rpx;
		margin: 0 10rpx 20rpx 10rpx;
	}
 .login-but{
	 height: 40px;
	 background: #27A0FF;
	 border-radius: 20px;
	font-weight: 500;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 40px;
	text-align: center;
	margin: 0 auto;
	margin-top: 40rpx;
	width: 100%;
	display: block;
 }
  .tag-item{
	  width: 30%;
	  height: 40px;
	  background: #F8F8F8;
	  border-radius: 4px;
	  color: #333333;
	  text-align: center;
	  line-height: 40px;
	  margin-right: 9px;
	  margin-bottom: 8px;
	 
  }
  .tag-item.active{
  	 background: rgba(39,160,255,0.15);
  	 border: 1px solid #27A0FF;
	 color: #27A0FF;
  }
  .popup-container{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
  }
  	.container {
  		width: 100%;
  		min-height: calc(100vh - 50px);
  		display: flex;
  		flex-direction: column;
  	}
	.body {
		overflow-y: scroll;
		flex: 1;
	}
	.pop-content{
		position: absolute;
		top: 40px;
		width: 100%;
		height: calc(100vh - 140px);
		z-index: 99999;
	}
	/* 去掉所有 .uv-drop-down 的边距 */
	.uv-drop-down {
	  padding: 5,5px;
	  margin: 0;
	  align-items: center;
	  size: 11rpx;
	  text-size:11rpx
	}
	.uv-drop-down-item {
	padding: 5,5px;
	  margin: 0;
	  size: 11rpx;

	  
	}
	.uv-text__value{
		font-size: 12px;
	}
	.uv-drop-down option {
	    font-size: 11rpx; /* 设置下拉菜单选项的字体大小为16px */
	}
	
	element.style {
	    text-decoration: none;
	    font-weight: normal;
	    overflow-wrap: normal;
	    font-size: 14px;
	    color: rgb(153, 153, 153);
	    margin-right: 8px;
	    max-width: 160px;
	}
</style>
